<template>
  <ul class="common-list">
    <li v-for="(item,index) in lists" :key="index">
      <nuxt-link :to="{path:item.linkUrl}" v-if="item.isLink">
        <span>{{item.title}}</span>
      </nuxt-link>
      <a :href="item.linkUrl" v-else @click="OnChange"><span>{{item.title}}</span>
        <!--<label class="common-list__switch" :class="{'&#45;&#45;switch':switchKey}" @click="toggle" v-show="item.title==='夜间模式'">-->
          <!--<span></span>-->
        <!--</label>-->
      </a>

    </li>
  </ul>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import {Prop} from "vue-property-decorator";
  import {Actions} from "../../enums/Store";

  @Component()
  export default class CommonList extends Vue {
    @Prop({type:Array}) lists
    @Prop({default:false}) display
    private OnChange(){
      this.$emit('openModal',true)
    }



  }
</script>

<style lang="scss">
  @include component(common-list) {
    grid-column: 1 / 2 span;

    li {

      border-bottom: 1px solid #ccc;
      &:nth-last-of-type(1){
        border: none;
      }
      @include baseline($font-size-1){
        padding: $mobile-row-1 0;
      }

      a{
        color: #122025;
        display: inline-block;
        width: 100%;
        padding-left: 2rem;
        position: relative;

        &:before{
          content: '';
          width: 24px;
          height: 24px;
          position: absolute;
          left: 0;
          opacity: 0.5;

        }

        &:after{
          content: '';
          width: 16px;
          height: 16px;
          position: absolute;
          right: 0;
          opacity: 0.5;
        }

      }

      @for $i from 1 through 5 {
        &:nth-child(n + #{$i}){
          a{
            &:before{
              background-image: url("../../assets/imgs/icons/my-icon-#{$i}.svg");
              background-size: cover;
            }

            &:after{
              background-image: url("../../assets/imgs/icons/arrow-right.svg");
              background-size: cover;
            }


          }
        }
      }
    }

    @include part(switch){
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
      float: right;
      z-index: 2;
      span{
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #ccc;
        transition: .4s;
        border-radius: 34px;

        &:before{
          position: absolute;
          content: '';
          height: 26px;
          width: 26px;
          left: 4px;
          bottom: 4px;
          background: $color-fff;
          transition: .4s;
          border-radius: 50%;

        }
      }

      @include option(switch){

        span{
          background: #67C23A;
          &:before{
            transform: translateX(26px);
          }
        }
      }

    }
  }
</style>
